<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css">
</head>
<body>
<table id="myTable"></table>
</body>
<script>
    <div th:each={}></div>

    /**
     * 页面加载
     */
    $(function (){
        $("#myTable").bootstrapTable({
            url:"/getPictureTable",
            columns:[
                {checkbox:true},//是否展示复选框
                {field:'productId',title:'项目名称',align:'center',width:150,formatter:function (value, row){
                        return "<a href='javascript:jumpToPictureParticulars(\""+row.queryPictureId+"\",\""+row.productId+"\")'>"+value+"</a>";
                    }},
                {field:'productName',title:'采购数量',align:'center',width:150},
                {field:'statusName',title:'开始时间',align:'center',width:150,},
                {field:'queryPictureStartDate',title:'截止时间',align:'center',width:150},
                {field:'queryPictureEndDate',title:'参与供应商数',align:'center',width:150},
                {field:'queryPictureEndDate',title:'状态',align:'center',width:150}
            ],
            //开启分页以后，默认会传入两个参数,而这两个参数，直接是mysql的分页计算后的数据
            pagination:true,
            pageSize:2,
            pageList:[2,4,6,8,10],
            sidePagination : 'client',//server:服务器端分页{rows:[],total:10}|client：前端分页 [{},{}]
            toolbar:'#toolBar',
            queryParams:function(){
                var productName = $("#productName").val();
                var queryPictureState = $("#queryPictureState").val();
                var starDate = $("#starDate").val();
                var endDate = $("#endDate").val();
                return {
                    'productName':productName,
                    'starDate':starDate,
                    'endDate':endDate,
                    'queryPictureState':queryPictureState
                };
            },

        })
    })
    })



</script>
</html>